<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b站&原生html css js</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/menuFix.css">
    <link rel="stylesheet" href="./css/slideshow.css">
    <link rel="stylesheet" href="./css/aside.css">
    <script async src="./js/index.js"></script>
    <script async src="./js/animate.js"></script>
    <script async src="./js/feature.js"></script>
</head>

<body>
    <header>
        <div class="bg">
            <div class="head-top">
                <div class="head-left">
                    <ul></ul>
                </div>
                <div class="head-center">
                    <input type="text" placeholder="xxx">
                    <button>
                        <?xml version="1.0" ?><svg class="feather feather-search" fill="none" height="24"
                            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="11" cy="11" r="8" />
                            <line x1="21" x2="16.65" y1="21" y2="16.65" />
                        </svg>
                    </button>
                </div>
                <div class="head-right">
                    <ul></ul>
                </div>
            </div>
            <div class="logo">
                <img src="https://dummyimage.com/160x80&text=TEST" alt="TEST">
            </div>
        </div>
    </header>
    <div class="menu">
        <div class="menu-left">
            <ul>
                <li>
                    <a href="javascript:;">
                        <span>
                            <?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                                <line x1="12" x2="12.01" y1="17" y2="17" />
                            </svg>
                        </span>
                        <span>动态</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <span>
                            <?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                                <line x1="12" x2="12.01" y1="17" y2="17" />
                            </svg>
                        </span>
                        <span>热门</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="menu-center">
            <ul></ul>
        </div>
        <div class="menu-right">
            <ul>
            </ul>
        </div>
    </div>
    <div class="menu-scrolling">
        <div class="menu-scrolling-container">
            <div class="menu-scrolling-left">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <span>
                                <?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="12" cy="12" r="10" />
                                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                                    <line x1="12" x2="12.01" y1="17" y2="17" />
                                </svg>
                                <span>动态</span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>
                                <?xml version="1.0" ?><svg class="feather feather-help-circle" fill="none" height="24"
                                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="12" cy="12" r="10" />
                                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                                    <line x1="12" x2="12.01" y1="17" y2="17" />
                                </svg>
                                <span>热门</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="menu-scrolling-center">
                <ul></ul>
            </div>
            <div class="menu-scrolling-right">
                <ul></ul>
            </div>
            <div class="icon-extend">
                <?xml version="1.0" ?><svg class="feather feather-chevron-down" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="6 9 12 15 18 9" />
                </svg>
            </div>
        </div>
    </div>
    <aside>
        <ul class="aside-container">
            <li class="refresh">
                <?xml version="1.0" ?><svg class="feather feather-rotate-cw" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="23 4 23 10 17 10" />
                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                </svg>
            </li>
            <li class="extend">
                <?xml version="1.0" ?><svg class="feather feather-more-horizontal" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                    <circle cx="5" cy="12" r="1" />
                </svg>
                <div class="feedback-service">
                    <a href="javascript:;">反馈</a>
                    <a href="javascript:;">
                        <?xml version="1.0" ?><svg class="feather feather-user" fill="none" height="24"
                            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                            <circle cx="12" cy="7" r="4" />
                        </svg>
                        <span>客服</span>
                    </a>
                </div>
            </li>
            <li class="goBackTop">
                <?xml version="1.0" ?><svg class="feather feather-chevron-up" fill="none" height="24"
                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="18 15 12 9 6 15" />
                </svg>
                <span>顶部</span>
            </li>
        </ul>
    </aside>
    <main>
        <ul>
            <!-- 轮播图 -->
            <div class="slideshow">
                <ul class="slideshowUl"></ul>
                <div class="slideshow-operation">
                    <div class="row-1">
                        <a href="javascript:;">titletitletitletitle</a>
                        <div class="btn">
                            <button>&lt;</button>
                            <button>&gt;</button>
                        </div>
                    </div>
                    <div class="row-2">
                        <ol></ol>
                    </div>
                </div>
            </div>
            <!-- 占位元素 -->
            <div class="box"></div>
        </ul>
    </main>
    <footer>
        <div class="footer-top">
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </div>
        <div class="footer-bottom">
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, officiis! Culpa excepturi at beatae
                laboriosam, nesciunt facere dolore id laborum, voluptates perferendis, provident porro molestiae
                mollitia omnis. Rem, laudantium illo.
            </p>
            <div>
                <img src="https://dummyimage.com/600x400/ddd/fff&text=1" alt="1">
                <img src="https://dummyimage.com/600x400/ddd/fff&text=1" alt="1">
                <img src="https://dummyimage.com/600x400/ddd/fff&text=1" alt="1">
            </div>
        </div>

    </footer>
</body>

</html>